<template>
	<view class="content">
		<!-- 海报弹窗 -->
		<view class="poster-img-box">
			<image class="poster-img" :src="posterImage" mode="widthFix"></image>
		</view>
		<!-- 各海报模块 -->
		<shopro-canvas v-if="showPoster" ref="shoproCanvas" :canvasParams="canvasParams" @success="onSuccess">
		</shopro-canvas>
	</view>
</template>
<script>
	/**
	 * 分享弹窗
	 * @property {Boolean} value = showModal - v-model控制显隐
	 * @property {String} posterType - 海报类别
	 * @property {Object} posterInfo - 海报数据
	 * @property {Object} shareDetail - 分享信息
	 */
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import Auth from '@/shopro/permission/index.js';
	export default {
		name: 'shoproShare',
		components: {},
		data() {
			return {
				showShareGuide: false, //H5的指引。
				showPoster: false, //海报弹窗
				platform: this.$platform.get(),
				posterImage: '',
				canvasParams: {}
			};
		},
		props: {
			posterType: {
				type: String,
				default: ''
			},
			posterInfo: {
				type: Object,
				default: () => {}
			},
			shareDetail: {
				type: Object,
				default: () => {}
			},
			value: {}
		},
		computed: {
			...mapState({
				userInfo: ({
					user
				}) => user.userInfo,
				configShare: ({
					shopro
				}) => shopro.config.share
			}),
			showShare: {
				get() {
					return true
					// return this.value;
				},
				set(val) {
					if (!this.showPoster) {
						val ? uni.hideTabBar() : uni.showTabBar();
					}
					this.$emit('input', val);
				}
			}
		},

		created() {
			uni.$on('ON_WX_SHARE', () => {
				this.showShare = false;
			});
		},
		mounted() {
			// 获取海报背景图
			// 				console.log(that.configShare.user_poster_bg,12312)
			this.onPoster()
		},
		methods: {
			// 关闭弹窗
			onClosePoster() {
				this.showPoster = false;
				uni.showTabBar();
			},
			// 分享好友
			shareFriend() {
				let that = this;
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: that.shareDetail.path,
					title: that.shareDetail.title,
					summary: that.shareDetail.title,
					image: that.shareDetail.image,
					success: res => {
						console.log('success:' + JSON.stringify(res));
						this.showShare = false;
					},
					fail: err => {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// #endif
				// #ifdef H5
				this.showShare = false;
				this.showShareGuide = true;
				this.$wxsdk.share({
					title: that.shareDetail.title,
					desc: that.shareDetail.subtitle || '',
					path: that.shareDetail.path,
					image: that.shareDetail.image
				});
				// #endif
			},

			// 保存图片
			async saveImage() {
				let that = this;
				if (['wxOfficialAccount', 'H5'].includes(this.platform)) {
					this.$u.toast('长按图片保存');
					return false;
				}
				let authState = await new Auth('writePhotosAlbum').check();
				if (authState) {
					uni.saveImageToPhotosAlbum({
						filePath: that.posterImage,
						success: res => {
							this.$u.toast('保存成功');
							this.showPoster = false;
						},
						fail: err => {
							console.log(`图片保存失败:`, err);
							this.$u.toast('保存失败');
						}
					});
				}
			},
			// 复制链接
			copySharePath() {
				let that = this;
				uni.setClipboardData({
					data: that.shareDetail.copyLink,
					success: data => {
						that.$u.toast('已复制到剪切板');
						that.showShare = false;
					}
				});
			},
			// 获取海报格式,规则说明在@/shopro/poster/tools.js中的initDrawArray
			getPosterFormatter() {
				const that = this;
				let data = {};
				switch (this.posterType) {
					case 'user':
						data = {
							backgroundImage: 'http://www.jypintuan.top/share.png',
							// backgroundImage: that.configShare.user_poster_bg,
							drawArray: [{
									name: '用户昵称',
									type: 'text',
									text: that.userInfo.nickname,
									isBgCenter: false,
									size: 28,//文字大小
									dx:60,
									dy: 900,
									color: '#333',
									textAlign: 'middle',
									textBaseLine: 'middle'
								},
								{
									name: 'avatar',
									type: 'image',
									url: that.userInfo.avatar,
									alpha: 1,
									isBgCenter: false,
									dx:80,
									dy: 780,
									dWidth: 120,
									dHeight: 120,
									circleSet: {}//圆形设置，没发现用法
								},
								// #ifdef MP-WEIXIN
								{
									name: 'wxCode',
									type: 'image',
									url: `${that.$API_URL}wechat/wxacode?scene=${that.shareDetail.query}`,//二维码参数
									alpha: 1,//透明度
									dy: 560,
									isBgCenter: true,
									dWidth: 180,//二维码宽度
									dHeight: 180//二维码高度
								},
								// #endif
								// #ifndef  MP-WEIXIN
								{
									name: '普通二维码',//类型名字
									type: 'qrcode',//类型
									text: that.shareDetail.path,//二维码参数
									size: 180,//二维码大小
									dx:400,//x轴
									dy: 760,//y轴
									isBgCenter: false//是不是在中间，设置之后dx不生效
								}
								// #endif
							]
						};
						break;
					case 'goods':
						data = {};
						break;
					case 'groupon':
						data = {};
						break;
					default:
						console.log('%cerr:没有此类型海报数据', 'color:green;background:yellow');
						break;
				}
				return data;
			},
			// 绘制成功
			onSuccess(e) {
				this.posterImage = e;
			},
			// 开始绘制
			onPoster() {
				if (this.$store.state.user.isLogin) {
					this.canvasParams = this.getPosterFormatter();
					this.showPoster = true;
				} else {
					this.$store.dispatch('showAuthModal', 'accountLogin');
				}
				this.showShare = false;
			}
		}
	};
</script>

<style lang="scss">
	page{
		width: 750rpx;
		height: 100vh;
	}
	.content{
		position: fixed;
		width: 750rpx;
		bottom: 0;
		top: 0;
	}
	.poster-img-box {
		width: 720rpx;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		.poster-img {
			width: 750rpx;
			border-radius: 20rpx;
		}
	}
</style>
